<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册页面</title>
    <link rel="stylesheet" href="css/Register.css" />
  </head>
  <body>
    <div class="header">
      <img src="img/loginLogo.png" alt="" />
      <p>欢迎注册</p>
    </div>
    <div class="center">
      <div class="top">
        <p>已有账号，去<a href="login.html">登录</a></p>
      </div>

      <div class="foot">
        <div>
          <span>手机号码：</span>
          <input class="zh" type="text" placeholder="请输入手机号" />&nbsp;
          <span class="tishi tishi1">请输入正确的手机号码</span>
        </div>
        <div>
          <span>账号密码：</span>
          <input class="mm" type="password" placeholder="请输入密码" />&nbsp;
          <span class="tishi tishi2"
            >密码必须为字母开头，长度在6-20位字符之间。</span
          >
        </div>
        <div>
          <span>确认密码：</span>
          <input class="qrmm" type="password" placeholder="请确认密码" />&nbsp;
          <span class="tishi tishi3">请和上面的密码保持一致</span>
        </div>
      </div>
      <button class="btn">立即注册</button>
    </div>

    <script src="js/jquery.js"></script>
    <script>
      $(".zh").blur(function () {
        let a = /^1(3|4|5|6|7|8|9)\d{9}$/;
        let b = this.value;
        if (a.test(b)) {
          $(".tishi1").css({ display: "none" });
        } else {
          $(".tishi1").css({ display: "inline-block" });
        }
      });
      $(".mm").blur(function () {
        let a = /^[a-zA-Z_]\w{5,14}$/;
        let b = this.value;

        if (a.test(b) == false) {
          $(".tishi2").css({ display: "inline-block" });
        } else {
          $(".tishi2").css({ display: "none" });
        }
      });
      $(".qrmm").blur(function () {
        let b = $(".mm").val();
        if (b == this.value) {
          $(".tishi3").css({ display: "none" });
        } else {
          $(".tishi3").css({ display: "inline-block" });
        }
      });

      // 注册
      $(".btn").click(function () {
        if (
          $(".zh").val() == "" ||
          $(".mm").val() == "" ||
          $(".qrmm").val() == ""
        ) {
          alert("手机号或密码不能为空");
          return;
        }

        if ($(".mm").val() != $(".qrmm").val()) {
          $(".tishi3").css({ display: "inline-block" });
          return;
        }

        $.get("http://jx.xuzhixiang.top/ap/api/reg.php", {
          username: $(".zh").val(),
          password: $(".mm").val(),
        }).then((res) => {
          if (res.code == 0) {
            alert("注册失败," + res.msg);
            return;
          } else {
            alert("注册成功，一秒后跳转到登录页面");
            document.cookie = "zh=" + $(".zh").val();
            document.cookie = "mm=" + $(".mm").val();
            setTimeout(function name(params) {
              location.href = "login.html";
            }, 1000);
          }
        });
      });
    </script>
  </body>
</html>
